<template>
	<view class="container">
		<view class="header">
			<dropDownMenu v-if="show" class="downMenu" :titleArr="titleArr" :dropArr="dropArr" @finishDropClick="finishClick"></dropDownMenu>
			<view class="total">数量：{{ total }}</view>
		</view>
		<view class="list" v-if="list.length > 0">
			<view class="box" v-for="item in list" :key="item.id" @click="goDetail(item)">
				<view class="name">
					{{ item.customer_name }}
				</view>
				<view class="bot">
					<view class="time">{{ item.start_date }} 至 {{ item.end_date }}</view>
					<view class="address">{{ item.room_address }}</view>
				</view>
			</view>
			<uni-pagination v-if="total > FormData.perpage" :total="total" :pageSize="FormData.perpage" :value="FormData.page" />
		</view>
		<view class="empty" v-else>
			<image class="image" src="@/static/img/empty.png" mode="aspectFit"></image>
			<view class="emptyWord">暂无数据</view>
		</view>
		<keyWord :words="FormData.keyword" @onChange="setKeyWord" />
	</view>
</template>

<script>
import api from '@/api/api';
export default {
	data() {
		return {
			FormData: {
				group_id: '',
				keyword: '',
				page: 1,
				perpage: 10
			},
			total: 0,
			current: 0,
			titleArr: ['分组', ''],
			dropArr: [[]],
			show: false,
			list: []
		};
	},
	onLoad() {
		this.show = false;
		this.getGroup();
	},
	onShow() {
		this.getBookList();
	},
	onPullDownRefresh() {
		this.FormData.page = 1;
		this.getBookList();
	},
	methods: {
		finishClick(resultData) {
			this.FormData.group_id = resultData[0];
			this.FormData.page = 1;
			this.getBookList();
		},
		setKeyWord(e) {
			this.FormData.keyword = e;
			this.getBookList();
		},
		goDetail(item) {
			uni.navigateTo({
				url: '/pages/details/book?sn=' + item.rent_sn
			});
		},
		getBookList() {
			uni.showLoading({
				title: '加载中...'
			});
			const queryData = Object.assign({}, this.FormData);
			if (queryData.group_id == '') {
				delete queryData.group_id;
			}
			if (queryData.keyword == '') {
				delete queryData.keyword;
			}
			api.bookList(queryData).then((res) => {
				this.list = res.data.items;
				this.total = res.data.total;
				uni.hideLoading();
				uni.stopPullDownRefresh();
			});
		},
		getGroup() {
			api.groupList({}).then((data) => {
				let list = data.data;
				let arr = [];
				for (let i = 0; i < list.length; i++) {
					let base = {
						text: list[i].group_name,
						value: list[i].id
					};
					arr.push(base);
				}
				let all = {
					text: '全部',
					value: ''
				};
				arr.unshift(all);
				this.dropArr[0] = arr;
				this.show = true;
			});
		}
	}
};
</script>

<style lang="scss">
.header {
	.total {
		width: 50%;
	}
}
.list {
	padding: 20rpx;
	.box {
		margin-bottom: 20rpx;
		background: #fff;
		border-radius: 10rpx;
		position: relative;
		overflow: hidden;
		.name {
			font-size: 30rpx;
			padding: 20rpx;
			border-bottom: 1rpx solid $uni-border-3;
		}

		.bot {
			padding: 20rpx;
			font-size: 26rpx;
			color: $uni-main-color;
			.time {
				margin-bottom: 10rpx;
			}
		}
	}
}
</style>
